<script setup type="ts">
import { Message, Modal } from '@arco-design/web-vue'
import { MoreOne } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
import CanvasCard from './components/canvas-card.vue'
import EditCanvasModal from '@/views/dashboard/components/edit-canvas-modal.vue'
import { copyGraph, delGraph, getGraphList } from '@/api/graph'
import { serializeRequestForm } from '@/utils'
import { reactive, onMounted, ref } from 'vue'
const form = reactive({
  total: 0,
  pageIndex: 1,
  pageSize: 20,
  senseCode: '2OAQBA',
  name: '',
  tableData: []
})
const getList = async () => {
  const params = {
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    senseCode: '2OAQBA',
    searchFields: serializeRequestForm({
      name: form.name
    })
  }
  const { data } = await getGraphList(params)
  form.tableData = data.rows
  form.total = data.total
}
onMounted(async () => {
  await getList()
})

const EditCanvasModalRef = ref()
const handleClickEditCanvas = (type = 'add', item) => {
  EditCanvasModalRef.value.init(type, item)
}
const handleCopyCanvas = (item) => {
  let okLoading = false
  Modal.warning({
    title: '提示',
    content: '是否需要复制当前画布?',
    okLoading,
    cancelText: '取消',
    okText: '复制',
    hideCancel: false,
    onBeforeOk: async () => {
      try {
        await copyGraph(item.id)
        okLoading = true
        Message.success('复制成功')
        await getList()
      } catch (e) {
        console.log(e)
        okLoading = true
      }
      return true
    }
  })
}
const handleDelCanvas = (item) => {
  let okLoading = false
  Modal.error({
    title: '提示',
    content: '是否需要删除当前画布?',
    okLoading,
    cancelText: '取消',
    okText: '删除',
    hideCancel: false,
    onBeforeOk: async () => {
      try {
        await delGraph(item.id)
        okLoading = true
        Message.success('删除成功')
        await getList()
      } catch (e) {
        console.log(e)
        okLoading = true
      }
      return true
    }
  })
}
const router = useRouter()
const goDetail = (item) => {
  router.push({
    name: 'editor',
    query: {
      id: item.id
    }
  })
}
</script>

<template>
  <div class="dashboard p-8">
    <EditCanvasModal ref="EditCanvasModalRef" @on-success="getList"></EditCanvasModal>
    <div class="title flex items-center">
      <h2 class="font-bold text-[20px]">我的画布</h2>
      <a-space class="ml-auto" size="large">
        <a-input-search
          placeholder="画布名称"
          v-model="form.name"
          @search="getList"
        >
        </a-input-search>
        <a-button type="primary" @click="handleClickEditCanvas()">新建画布</a-button>
      </a-space>
    </div>
    <div class="mt-4 min-h-[75dvh]">
      <a-grid
        :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }"
        :colGap="16"
        :rowGap="16"
        v-if="form.tableData.length"
      >
        <a-grid-item v-for="item in form.tableData" :key="item.id">
          <canvas-card :canvas="item" @on-edit="handleClickEditCanvas('edit', item)" @click="goDetail(item)">
            <template #action >
              <a-dropdown trigger="hover">
                <a-button type="text" size="small" class="rounded-md">
                  <template #icon>
                    <more-one theme="multi-color" size="24px" />
                  </template>
                </a-button>
                <template #content>
                  <a-doption @click="handleClickEditCanvas('edit', item)">编辑</a-doption>
                  <a-doption @click="handleCopyCanvas(item)">复制</a-doption>
                  <a-doption @click="handleDelCanvas(item)">删除</a-doption>
                </template>
              </a-dropdown>
            </template>
          </canvas-card>
        </a-grid-item>
      </a-grid>
      <div v-else class="my-12">
        <a-empty> </a-empty>
      </div>
    </div>
    <div class="flex justify-end">
      <a-pagination
        :total="form.total"
        show-page-size
        class="my-4"
        v-model:current="form.pageIndex"
        v-model:pageSize="form.pageSize"
        @change="getList"
        @page-size-change="getList"
      ></a-pagination>
    </div>
  </div>
</template>
